
<template>
    <div class="demo-split">
        <Button type="info" class="add" @click="modal1=true;choose=1">Add</Button>
        <Button type="error" class="delete" @click="removesData()">Delete</Button>
        <Split v-model="split1">
            <div slot="left" class="demo-split-pane" style="width:400px">
                <template>
                    <Tree :data="data1" @on-select-change="onSelectChange($event)"></Tree>
                </template>
            </div>
            <div slot="right" class="demo-split-pane">
               <Table border :columns="columns" :data="list" @on-select="selectData" @on-select-all="onSelectAll">
                    <template slot-scope="{ row }" slot="name">
                        <strong>{{ row.name }}</strong>
                    </template>
                    <template slot-scope="{ row, index }" slot="action">
                        <Button type="primary" size="small"  @click="modal1=true;show(row);choose=2" >Updata</Button>
                        <Button type="error" size="small" @click="remove(row._id)">Delete</Button>
                        <Button type="error" size="small" @click="commit(row)">commit</Button>
                    </template>
                </Table>
                <Page :total="total" show-sizer  @on-change="onChangePage" :page-size-opts="[5,10,20,50]" :page-size="rows" @on-page-size-change="onPageSizeChange"/>
            </div>
        </Split>
        <template>


            <Modal
                v-model    = "modal1"
                title      = "添加新闻数据"
                @on-ok     = "ok"
                @on-cancel = "cancel"
               draggable>
                 <form action="">
                    <Input type="text" placeholder="新闻标题" style="margin-bottom:20px;" v-model="value1"></Input>
                    <Input type="text" placeholder="新闻详情" style="margin-bottom:20px;" v-model="value2"></Input>
                </form>
            </Modal>



            <Modal
            v-model    = "commentmodal"
            title      = "评论"
            @on-ok     = "ok"
            @on-cancel = "cancel"
        >
            <Form ref="commentdata" :model="commentdata"  :label-width="80">
                <FormItem label="评论对象" >
                    <Input type="text" v-model="commentdata.commentObjectId"></Input>
                </FormItem>
                <FormItem label="title" >
                    <Input type="text" v-model="commentdata.titlecommentObject  "></Input>
                </FormItem>
                <FormItem label="content" >
                    <quill-editor v-model="commentdata.commentContent"></quill-editor>
                    <!-- <Input type="text" v-model="formValidate.address" number></Input> -->
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="commentsubmit()">提交</Button>
                    <Button  style="margin-left: 8px">清空</Button>
                </FormItem>
            </Form>

            <div slot="footer"></div>
        </Modal>
        </template>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                commentmodal:false,
                 commentdata: {
                   titlecommentObject: '',
                   commentObjectId   : '',
                   commentContent    : ''
                },
                split1 : 0.2,
                data1  : [],
                title  : '',
                _id    : '',
                modal1 : false,
                value1 : '',
                value2 : '',
                choose : '',
                strIds : [],
                columns: [
                     {
                        type : 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '新闻标题',
                        width: 200,
                        key  : 'title'
                    },
                    {
                        title: '新闻详情',
                        width: 200,
                        key  : 'content'
                    }, {
                        title: '评论',
                        width: 60,
                        key  : 'commentnum'
                    },
                    {
                        title: 'Action',
                        slot : 'action',
                        width: 300,
                        align: 'center'
                    }
                ],
                list : [],
                total: 0,
                page : 1,
                rows : 5,
            }
        },
         methods: {
             commentsubmit(){
                 this.axios({
                    url   : 'http://localhost:3000/comment',
                    method: 'post',
                    data  : this.commentdata
                }).then(res => {
                    this.commentmodal = false;
                    this.onchange();
                });
             },
             commit(row){
                 console.log(event);
                    this.commentmodal= true;
                    this.commentdata.commentObjectId= row._id;
                    this.commentdata.titlecommentObject =row.title;
             },
            getList(){
                this.axios({
                    url   : 'http://localhost:3000/cate/list/1',
                    method: 'post'
                }).then(res=>{
                    this.data1 = res.data
                })
            },
            selectData(selection){
                this.strIds = [];
                for(var value of selection){
                    this.strIds.push(value._id)
                }
            },
            removesData(){
                this.axios({
                    url   : 'http://localhost:3000/news/removes',
                    method: 'post',
                    data  : {
                        ids: this.strIds.join(',')
                    }
                }).then(res=>{
                    this.onchange()
                })
            },
            onSelectAll(alldata){
                this.strIds = [];
                for(var value of alldata){
                    this.strIds.push(value._id)
                }
                removesData()
            },
            show (row) {
                this.value1 = row.title;
                this.value2 = row.content;
                this._id    = row._id
            },
            remove(id){
                 this.$Modal.confirm({
                    title  : '确认对话框',
                    content: '<p>你想删除该记录吗?</p>',
                    onOk   : () => {
                         this.axios({
                            url   : `http://localhost:3000/news/${id}`,
                            method: 'delete'
                        }).then(res=>{
                            this.onchange();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('Clicked cancel');
                    }
                })
            },
            onChangePage(page){
               this.page = page;
               this.onchange()
            },
            onPageSizeChange(pageSize){
                this.rows = pageSize;
                this.onchange()
            },
            onchange(){
                 this.tId = this.rows+''+this.page+''+this.cateId;
                 this.axios({
                    url   : `http://localhost:3000/news/list/${this.tId}`,
                    method: 'get',
                    data  : {
                        page: this.page,
                        rows: this.rows
                    }
                }).then(res=>{
                    this.list  = res.data.rows;
                    this.total = res.data.total;
                })
            },
            onSelectChange(event){
                this.cateId = event[0]._id;
                this.axios({
                    url   : `http://localhost:3000/news/list/${this.cateId}`,
                    method: 'get',
                    data  : {
                        page: this.page,
                        rows: this.rows
                    }
                }).then(res=>{
                    console.log(res.data.rows);                    
                    this.list  = res.data.rows;
                    this.total = res.data.total;
                })
            },
            ok(){
                if(this.choose==1){
                    this.axios({
                        url   : 'http://localhost:3000/news',
                        method: 'post',
                        data  : {
                            cateId : this.cateId,
                            title  : this.value1,
                            content: this.value2
                        }
                    }).then(res=>{
                    this.onchange();
                    this.clear()
                    })
                    }else{
                         this.axios({
                            url   : `http://localhost:3000/news/${this._id}`,
                            method: 'put',
                            data  : {
                                title  : this.value1,
                                content: this.value2
                            }
                        }).then(res=>{
                         this.onchange();
                         this.clear()
                        })
                    }
            },
            cancel(){
                this.$Message.info('Clicked cancel');
            },
            clear(){
                this.value1 = '';
                this.value2 = '';
            }
        },
        mounted(){
            this.getList();
        }
    }
</script>
<style>
    .demo-split{
        min-height: 680px;
        border    : 1px solid #dcdee2;
    }
    .demo-split-pane{
        padding: 10px;
    }
    .ivu-split-trigger{
        display: none;
    }
    .add{
        margin-left: 320px;
    }
</style>
